<template>
  <div style="width:1200px; margin:0 auto">
    <Header></Header>

    <div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="所有订单" name="first">
          <el-table
            :data="orderList"
            style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-table
                  :data="props.row.orderItems"
                  style="width: 100%">
                  <el-table-column
                    label="商品信息">
                    <template slot-scope="scope">
                      <span><img class="lazy" :src="scope.row.book.picture" width="80px" height="100px"></span>
                      <span>{{ scope.row.book.name }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="单价(元)" width="120">
                    <template slot-scope="scope">
                      {{ (scope.row.book.price * 0.01).toFixed(2) }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="number"
                    label="数量"
                    width="150">
                  </el-table-column>
                  <el-table-column label="金额(元)" width="120">
                    <template slot-scope="scope">
                      {{ (scope.row.book.price * scope.row.number * 0.01).toFixed(2) }}
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column
              label="订单号"
              prop="id">
            </el-table-column>
            <el-table-column
              label="备注"
              prop="userMessage">
            </el-table-column>
            <el-table-column
              label="订单总额">
              <template slot-scope="scope">
                {{ (totalPrice(scope.row.orderItems) * 0.01).toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column
              label="收货地址"
              prop="address.address">
            </el-table-column>
            <el-table-column
              label="收货人"
              prop="address.receiveName">
            </el-table-column>
            <el-table-column
              label="联系方式"
              prop="address.phone">
            </el-table-column>
            <el-table-column
              label="下单时间"
              prop="createDate">
            </el-table-column>
            <el-table-column prop="status" label="订单状态" width="100">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status === 1" size="small" type="danger">未支付</el-tag>
                <el-tag v-else-if="scope.row.status === 2" size="small">付款成功</el-tag>
                <el-tag v-else-if="scope.row.status === 3" size="small">已发货</el-tag>
                <el-tag v-else-if="scope.row.status === 4" size="small">已收货</el-tag>
                <el-tag v-else-if="scope.row.status === 5" size="small" type="success">交易成功</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="待付款" name="second">
          <el-table
            :data="noPayList"
            style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-table
                  :data="props.row.orderItems"
                  style="width: 100%">
                  <el-table-column
                    label="商品信息">
                    <template slot-scope="scope">
                      <span><img class="lazy" :src="scope.row.book.picture" width="80px" height="100px"></span>
                      <span>{{ scope.row.book.name }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="单价(元)" width="120">
                    <template slot-scope="scope">
                      {{ (scope.row.book.price * 0.01).toFixed(2) }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="number"
                    label="数量"
                    width="150">
                  </el-table-column>
                  <el-table-column label="金额(元)" width="120">
                    <template slot-scope="scope">
                      {{ (scope.row.book.price * scope.row.number * 0.01).toFixed(2) }}
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column
              label="订单号"
              prop="id">
            </el-table-column>
            <el-table-column
              label="备注"
              prop="userMessage">
            </el-table-column>
            <el-table-column
              label="订单总额">
              <template slot-scope="scope">
                {{ (totalPrice(scope.row.orderItems) * 0.01).toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column
              label="收货地址"
              prop="address.address">
            </el-table-column>
            <el-table-column
              label="收货人"
              prop="address.receiveName">
            </el-table-column>
            <el-table-column
              label="联系方式"
              prop="address.phone">
            </el-table-column>
            <el-table-column
              label="下单时间"
              prop="createDate">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="toPay(scope.row.address, scope.row.orderItems, scope.row.id)">去支付</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="待发货" name="third">
          <el-table
            :data="noSendList"
            style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-table
                  :data="props.row.orderItems"
                  style="width: 100%">
                  <el-table-column
                    label="商品信息">
                    <template slot-scope="scope">
                      <span><img class="lazy" :src="scope.row.book.picture" width="80px" height="100px"></span>
                      <span>{{ scope.row.book.name }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="单价(元)" width="120">
                    <template slot-scope="scope">
                      {{ (scope.row.book.price * 0.01).toFixed(2) }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="number"
                    label="数量"
                    width="150">
                  </el-table-column>
                  <el-table-column label="金额(元)" width="120">
                    <template slot-scope="scope">
                      {{ (scope.row.book.price * scope.row.number * 0.01).toFixed(2) }}
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column
              label="订单号"
              prop="id">
            </el-table-column>
            <el-table-column
              label="备注"
              prop="userMessage">
            </el-table-column>
            <el-table-column
              label="订单总额">
              <template slot-scope="scope">
                {{ (totalPrice(scope.row.orderItems) * 0.01).toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column
              label="收货地址"
              prop="address.address">
            </el-table-column>
            <el-table-column
              label="收货人"
              prop="address.receiveName">
            </el-table-column>
            <el-table-column
              label="联系方式"
              prop="address.phone">
            </el-table-column>
            <el-table-column
              label="下单时间"
              prop="createDate">
            </el-table-column>
            <el-table-column
              label="支付时间"
              prop="payDate">
            </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                等待发货
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="待收货" name="four">
          <el-table
            :data="noGetList"
            style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-table
                  :data="props.row.orderItems"
                  style="width: 100%">
                  <el-table-column
                    label="商品信息">
                    <template slot-scope="scope">
                      <span><img class="lazy" :src="scope.row.book.picture" width="80px" height="100px"></span>
                      <span>{{ scope.row.book.name }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="单价(元)" width="120">
                    <template slot-scope="scope">
                      {{ (scope.row.book.price * 0.01).toFixed(2) }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="number"
                    label="数量"
                    width="150">
                  </el-table-column>
                  <el-table-column label="金额(元)" width="120">
                    <template slot-scope="scope">
                      {{ (scope.row.book.price * scope.row.number * 0.01).toFixed(2) }}
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column
              label="订单号"
              prop="id">
            </el-table-column>
            <el-table-column
              label="备注"
              prop="userMessage">
            </el-table-column>
            <el-table-column
              label="订单总额">
              <template slot-scope="scope">
                {{ (totalPrice(scope.row.orderItems) * 0.01).toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column
              label="收货地址"
              prop="address.address">
            </el-table-column>
            <el-table-column
              label="收货人"
              prop="address.receiveName">
            </el-table-column>
            <el-table-column
              label="联系方式"
              prop="address.phone">
            </el-table-column>
            <el-table-column
              label="下单时间"
              prop="createDate">
            </el-table-column>
            <el-table-column
              label="发货时间"
              prop="deliveryDate">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="confirmGet(scope.row.id)">确认收货</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="待评价" name="five">
          <el-table
            :data="noCommentList"
            style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-table
                  :data="props.row.orderItems"
                  style="width: 100%">
                  <el-table-column
                    label="商品信息">
                    <template slot-scope="scope">
                      <span><img class="lazy" :src="scope.row.book.picture" width="80px" height="100px"></span>
                      <span>{{ scope.row.book.name }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="单价(元)" width="120">
                    <template slot-scope="scope">
                      {{ (scope.row.book.price * 0.01).toFixed(2) }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="number"
                    label="数量"
                    width="150">
                  </el-table-column>
                  <el-table-column label="金额(元)" width="120">
                    <template slot-scope="scope">
                      {{ (scope.row.book.price * scope.row.number * 0.01).toFixed(2) }}
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column
              label="订单号"
              prop="id">
            </el-table-column>
            <el-table-column
              label="备注"
              prop="userMessage">
            </el-table-column>
            <el-table-column
              label="订单总额">
              <template slot-scope="scope">
                {{ (totalPrice(scope.row.orderItems) * 0.01).toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column
              label="收货地址"
              prop="address.address">
            </el-table-column>
            <el-table-column
              label="收货人"
              prop="address.receiveName">
            </el-table-column>
            <el-table-column
              label="联系方式"
              prop="address.phone">
            </el-table-column>
            <el-table-column
              label="下单时间"
              prop="createDate">
            </el-table-column>
            <el-table-column
              label="收货时间"
              prop="confirmDate">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleEdit(scope.row.id)">去评价</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已完成" name="six">
          <el-table
            :data="finishList"
            style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-table
                  :data="props.row.orderItems"
                  style="width: 100%">
                  <el-table-column
                    label="商品信息">
                    <template slot-scope="scope">
                      <span><img class="lazy" :src="scope.row.book.picture" width="80px" height="100px"></span>
                      <span>{{ scope.row.book.name }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="单价(元)" width="120">
                    <template slot-scope="scope">
                      {{ (scope.row.book.price * 0.01).toFixed(2) }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="number"
                    label="数量"
                    width="150">
                  </el-table-column>
                  <el-table-column label="金额(元)" width="120">
                    <template slot-scope="scope">
                      {{ (scope.row.book.price * scope.row.number * 0.01).toFixed(2) }}
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column
              label="订单号"
              prop="id">
            </el-table-column>
            <el-table-column
              label="备注"
              prop="userMessage">
            </el-table-column>
            <el-table-column
              label="订单总额">
              <template slot-scope="scope">
                {{ (totalPrice(scope.row.orderItems) * 0.01).toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column
              label="收货地址"
              prop="address.address">
            </el-table-column>
            <el-table-column
              label="收货人"
              prop="address.receiveName">
            </el-table-column>
            <el-table-column
              label="联系方式"
              prop="address.phone">
            </el-table-column>
            <el-table-column
              label="下单时间"
              prop="createDate">
            </el-table-column>
            <el-table-column
              label="支付时间"
              prop="payDate">
            </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <el-tag size="small" type="success">交易成功</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

      </el-tabs>

      <el-dialog title="订单评价" :visible.sync="dialogFormVisible">
        <el-form label-width="80px">
          <el-form-item label="评价内容">
            <el-input v-model="pojo.comment" type="textarea"></el-input>
          </el-form-item>
          <el-button type="primary" @click="handleSave()">确定</el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </el-form>
      </el-dialog>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>
  import Footer from '@/components/Footer'
  import Header from '@/components/Header'
  import orderApi from '@/api/order'

  export default {
    components: {
      Footer,
      Header
    },
    data() {
      return {
        activeName: 'first',
        orderList: [],
        noPayList: [],
        noGetList: [],
        noSendList: [],
        noCommentList: [],
        finishList: [],
        dialogFormVisible: false, // 编辑窗口是否可见
        orderId: '', // 评价的订单id
        pojo: {} // 编辑表单绑定的实体对象
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        orderApi.getOrderList().then(response => {
          this.orderList = response.data
          for (var i = 0; i < this.orderList.length; i++) {
            var item = this.orderList[i]
            if (item.status === 1) {
              this.noPayList.push(item)
            } else if (item.status === 2) {
              this.noSendList.push(item)
            } else if (item.status === 3) {
              this.noGetList.push(item)
            } else if (item.status === 4) {
              this.noCommentList.push(item)
            } else {
              this.finishList.push(item)
            }
          }
        })
      },
      totalPrice(orderItems) {
        var total = 0
        for (var i = 0; i < orderItems.length; i++) {
          var item = orderItems[i]
          total += item.number * item.book.price
        }
        return total
      },
      toPay(address, orderItems, orderId) {
        this.$router.push({
          path: '/front/pay',
          name: 'Pay',
          params: {
            totalPrice: this.totalPrice(orderItems),
            orderId: orderId,
            address: address
          }
        })
      },
      confirmGet(id) {
        orderApi.confirm(id).then(response => {
          this.initData()
          this.fetchData()
          this.$message({
            message: '确认收货成功',
            type: 'success'
          })
        })
      },
      handleSave() {
        orderApi.comment(this.id, this.pojo).then(response => {
          this.$message({
            message: response.message,
            type: (response.flag ? 'success' : 'error')
          })
          if (response.flag) { // 如果成功
            this.initData()
            this.fetchData() // 刷新列表
          }
        })
        this.dialogFormVisible = false // 关闭窗口
      },
      handleEdit(id) {
        this.id = id
        this.dialogFormVisible = true // 打开窗口
      },
      initData() {
        this.orderList = []
        this.noPayList = []
        this.noGetList = []
        this.noCommentList = []
        this.finishList = []
      }
    }
  }
</script>

<style scoped>

</style>
